<template>
  <div v-loading="!show" element-loading-text="数据加载中..." :style="!show ? 'height: 500px' : 'height: 100%'" class="app-container">
    <div v-if="show">
      <el-row :gutter="6">
        <el-col :xs="24" :sm="24" :md="10" :lg="12" :xl="12" style="margin-bottom: 10px">
          <el-card class="box-card" style="background-color: #F76809;">
            <div style="color: #666;font-size: 20px;">
              <i class="el-icon-s-home" />
              <span>
                网站名称：趣淘书城
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="10" :lg="12" :xl="12" style="margin-bottom: 10px">
          <el-card class="box-card" style="background-color: #52CC33;">
            <div style="color: #666;font-size: 20px;">
              <i class="el-icon-price-tag" />
              <span>
                当前版本：v0.01
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="6">
        <el-col :xs="24" :sm="24" :md="10" :lg="6" :xl="6" style="margin-bottom: 10px">
          <el-card class="box-card">
            <div class="title">
              <i class="el-icon-sell" style="margin-right: 5px;font-size: 20px" />
              今日售出图书：{{ data.todayData[0].bookNum }}本
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="10" :lg="6" :xl="6" style="margin-bottom: 10px">
          <el-card class="box-card">
            <div class="title">
              <i class="el-icon-s-order" style="margin-right: 5px;font-size: 20px" />
              今日订单数：{{ data.todayData[0].orderNum }}份
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="10" :lg="6" :xl="6" style="margin-bottom: 10px">
          <el-card class="box-card">
            <div class="title">
              <i class="el-icon-bank-card" style="margin-right: 5px;font-size: 20px" />
              今日支付笔数：{{ data.todayData[0].paied }}笔
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="10" :lg="6" :xl="6" style="margin-bottom: 10px">
          <el-card class="box-card">
            <div class="title">
              <i class="el-icon-money" style="margin-right: 5px;font-size: 20px" />
              今日总销售额：{{ data.todayData[0].totalPrice | num2Point }}￥
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="6">
        <el-col :xs="24" :sm="24" :md="10" :lg="18" :xl="18" style="margin-bottom: 10px;height:600px">
          <el-card class="box-card" style="height:476px">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color: #666;font-size: 15px">今年销售额变化</span>
            </div>
            <lineChart :chart-data="data.chart" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" style="margin-bottom: 10px">
          <el-card class="box-card" :body-style="{padding:'0px'}" style="padding:0 20px 20px 20px">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color: #666;font-size: 15px">图书销售排行榜</span>
            </div>
            <rankList :list="data.rank" />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import RankList from '@/components/Echarts/RankList'
import LineChart from '@/components/Echarts/LineChartForDashBoard'
import { getDashBoardInfo } from '@/api/data.js'

export default {
  name: 'Dashboard',
  components: {
    RankList,
    LineChart
  },
  data() {
    return {
      show: false,
      monitor: null,
      data: Object
    }
  },
  created() {
    this.monitor = window.setInterval(() => {
      setTimeout(() => {
        this.init()
      }, 2)
    }, 5000)
  },
  methods: {
    init() {
      getDashBoardInfo().then(data => {
        this.data = data
        this.show = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  .box-card {
    margin-bottom: 5px;
    span {
      margin-right: 28px;
    }
    .el-icon-refresh {
      margin-right: 10px;
      float: right;
      cursor:pointer;
    }
    .el-card__body {
      padding-top: 0px;
    }
  }
}
  .title, .footer {
    // text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    height: 25px;
    line-height: 25px;
  }
  .content {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
  }
</style>
